In this tutorial, we will learn how to reload or refresh a webpage onclick button. We provide two examples in this post. In the first example, we use the Options API, and in the second example, we use the Compositions API. We utilize the window.location.reload() function to reload or refresh the page.
How to Reload Page in Vuejs?
Here is an example provided to refresh or reload the page onclick of a button. Feel free to try it out and modify the code as per your preference for use in your project.
Vue Js Reload/Refresh Page on Click(Options Api) Example
<div id="app">
<div>
<button @click="reloadPage">Reload Page</button>
</div>
</div>
<script>
new Vue({
el: '#app',
methods: {
reloadPage() {
window.location.reload();
}
}
});
</script>
Output of Vue Js Refresh Page on Button Click
Vue 3 Reload Page(Composition API) Example
<script type="module">
const {createApp} = Vue;
createApp({
setup() {
const refreshPage = () => {
window.location.reload();
};
return {
refreshPage
};
}
}).mount("#app");
</script>
